<template>
  <div>
    <div id="tab">
      <div class="logo">百宝箱</div>
      <div class="option">
        <span>
          <a-input-search placeholder="搜索" style="width: 200px" @search="onSearch" />
        </span>
        <span @click="openDrawer">
          <a-badge :count="1">
            <a-icon type="bell" :style="{ fontSize: '25px', color: '#08c' }" />
          </a-badge>
        </span>
        <span>
          <a-popover placement="bottomRight" title="个人信息">
            <template slot="content">
              <div style="text-align: center">
                <img
                  :src="$store.getters.user.avatar"
                  alt=""
                  width="40px"
                  height="40px"
                />
                <p>{{ $store.getters.user.realname }}</p>
                <p @click="$router.push('/mine')">作品集</p>
                <p>我的收藏</p>
                <p>观看历史</p>
              </div>
            </template>
            <a-icon type="user" :style="{ fontSize: '25px', color: '#08c' }" />
          </a-popover>
        </span>
      </div>
    </div>
    <a-drawer
      width="400"
      title="消息提醒"
      placement="right"
      :closable="false"
      :visible="visible"
      @close="onClose"
    >
      <a-empty v-if="data.length == 0" />
      <a-list item-layout="horizontal" :data-source="data">
        <a-list-item slot="renderItem" slot-scope="item">
          <a-list-item-meta :description="item.blog">
            <a slot="title" @click="goTarget(item.id)">{{ item.title }}</a>
            <a-avatar
              slot="avatar"
              src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
            />
          </a-list-item-meta>
        </a-list-item>
      </a-list>
    </a-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      data: [
        {
          title: "Ant Design Title 1",
          blog: "test",
          id: 1,
        },
        {
          title: "Ant Design Title 2",
          id: 1,
          blog: "test",
        },
        {
          id: 1,
          title: "Ant Design Title 3",
          blog:
            "testtttttt送的发发你是否你是否能收到几份浓缩咖啡必胜客的腹背受敌净空法师你的粉丝都方便大家开发商南京开发tttttttt",
        },
        {
          title: "Ant Design Title 4",
          id: 1,
          blog: "test",
        },
      ],
    };
  },
  methods: {
    goTarget(id) {},
    onSearch(value) {
      console.log(value);
    },
    openDrawer() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },
  },
};
</script>

<style scoped lang="less">
#tab {
  width: 100vw;
  height: 60px;
  background-color: #e6f7ff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 30px;
  .logo {
    font-weight: 800;
  }
}
.option {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  span {
    &:nth-child(n) {
      margin: 0 10px;
      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
